<template>
  <div>
    <div class="pd-mask" v-show="show" @click="cancel"></div>
    <date-box v-show="show">
      <div slot="hd" class="pd-hd">
        <a href="javascript:;" @click="cancel">取消</a>
        <a href="javascript:;" @click="confirm">确定</a>
      </div>
      <div slot="main" class="pd-main">
        <date-item ref="month" :listData="monthData" v-model="currentMonth" format="月"></date-item>
        <date-item ref="day" :listData="dayData" v-model="currentDay" format="日"></date-item>
        <date-item ref="piceTime" :listData="piceTimes" v-model="currentPiceTimeStr"></date-item>
      </div>
    </date-box>
  </div>
</template>
<script>
import dateBox from './DateBox'
import dateItem from './DateItem'
export default {
  name: 'DateTime',
  components: { dateBox, dateItem },
  props: ['time', 'show'],
  data() {
    return {
      monthData: Array.from({ length: 12 }, (value, index) => index + 1),
      dayData: [],
      piceTimes: ['上午', '下午', '全天'],
      currentMonth: 2,
      currentDay: null,
      currentPiceTimeStr: '上午',
      currentPiceTime: '09:00',
      currentYear: ''
    }
  },
  watch: {
    currentPiceTimeStr(newVal, oldVal) {
      switch (newVal) {
        case '上午':
          this.currentPiceTime = '09:00'
          break
        case '下午':
          this.currentPiceTime = '12:00'
          break
        case '全天':
          this.currentPiceTime = '00:00'
          break
      }
    }
  },
  created() {
    const date = new Date(this.time)
    this.currentYear = date.getFullYear()
    this.currentMonth = date.getMonth()
    this.currentDay = date.getDate()
    const h = date.getHours()
    if (h >= 12) {
      this.currentPiceTime = '12:00'
      this.currentPiceTimeStr = '下午'
    } else if (h >= 9) {
      this.currentPiceTime = '09:00'
      this.currentPiceTimeStr = '上午'
    } else {
      this.currentPiceTime = '00:00'
      this.currentPiceTimeStr = '全天'
    }
    this.dayList()
  },
  mounted() {
    this.after()
  },
  methods: {
    cancel() {
      this.$emit('changeTime')
    },
    confirm() {
      const timeStr =
        this.currentYear +
        '/' +
        this.currentMonth +
        '/' +
        this.currentDay +
        ' ' +
        this.currentPiceTime
      const newTime = new Date(timeStr).getTime()
      this.$emit('changeTime', newTime)
    },
    after() {
      this.$refs.month.init()
      this.$refs.day.init()
      this.$refs.piceTime.init()
    },
    dayList() {
      const allDay = new Date(this.currentYear, this.currentMonth, 0).getDate()
      this.dayData = Array.from({ length: allDay }, (value, index) => index + 1)
    }
  }
}
</script>
<style lang="stylus" scoped>
.pd-mask
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
  transition: opacity 0.2s ease-in;
  opacity: 0;
  z-index: 1500;
  background-color: rgb(0, 0, 0);
  opacity: 0.5;
  pointer-events: auto;
.pd-hd
  line-height: 38px;
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-bottom: 1px;
  box-shadow: 0 0px 1px #ddd;
  a
    height: 43px;
    padding: 0 30px;
    font-size: 15px;
    display: flex;
    align-items: center;
    color: #555;
    &:last-child
      color: #0D74DA;
.pd-main
  display: flex;
</style>
